Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
font-picker
Advanced tools
A simple, customizable font picker allowing users to preview, select and use Google Fonts on your website.
→ Demo
If you use React, see Font Picker for React.
To be able to access the API, you'll need to generate a Google Fonts API key.
You have the following options for installing/using the package:
FontPicker.js
file from the releases page and save it in your project. Include the script in your HTML at the end of the document <body>
:<script src="path/to/FontPicker.js"></script>
<script>
const fontPicker = new FontPicker(
YOUR_API_KEY, // Google API key
"Open Sans", // Default font
{ limit: 30 }, // Additional options
);
</script>
font-picker
package using NPM and import it in your code:npm install font-picker
import FontPicker from "font-picker";
const fontPicker = new FontPicker(
YOUR_API_KEY, // Google API key
"Open Sans", // Default font
{ limit: 30 }, // Additional options
);
Create an empty <div>
with id="font-picker"
in your HTML file. This is where the font picker will be generated.
<div id="font-picker"></div>
Add the class "apply-font"
to all HTML elements you want to apply the selected font to.
When the user selects a font, it will automatically be downloaded and applied to all HTML elements with the "apply-font"
class.
The following parameters can be passed to the constructor of the FontPicker
class:
const fontPicker = new FontPicker(apiKey, defaultFamily, options, onChange);
apiKey
(required): Google API keydefaultFamily
: Font that is selected on initialization. Default: "Open Sans"
options
: Object with additional optional parameters:
pickerId
: If you have multiple font pickers on your site, you need to give them unique IDs which must be appended to the pickers' id
attributes and the .apply-font
class names. Example: If the options object is { pickerId: "main" }
, use #font-picker-main
and .apply-font-main
families
: If only specific fonts shall appear in the list, specify their names in an array. Default: All font familiescategories
: Array of font categories to include in the list. Possible values: "sans-serif", "serif", "display", "handwriting", "monospace"
. Default: All categoriesscripts
: Array of scripts which the fonts must include and which will be downloaded on font selection. Default: ["latin"]
. Example: ["latin", "greek", "hebrew"]
(see all possible values)variants
: Array of variants which the fonts must include and which will be downloaded on font selection. Default: ["regular"]
. Example: ["regular", "italic", "700", "700italic"]
(see all possible values)filter
: Function which must evaluate to true
for a font to be included in the list. Default: font => true
. Example: If font => font.family.toLowerCase().startsWith("m")
, only fonts whose names begin with "M" will be in the listlimit
: Maximum number of fonts to display in the list (the least popular fonts will be omitted). Default: 50
sort
: Sorting attribute for the font list. Possible values: "alphabet", "popularity"
. Default: "alphabet"
onChange
: Function to execute whenever the active font is changedThe FontPicker
class exposes the following functions:
getFonts()
: Returns a map of all font names/objectsaddFont(fontFamily: string, index?: number)
: Adds the specified font to the font list (at the given index)removeFont(fontFamily: string)
: Removes the specified font from the font listgetActiveFont()
: Returns the font object of the currently active fontsetActiveFont(fontFamily: string)
: Sets the provided font as the active fontsetOnChange(onChange: (font: Font) => void)
: Update the onChange
function after the font picker has been initializedRequirements: Node.js, Yarn
git clone REPO_URL
yarn
yarn start
localhost:3000
Suggestions and contributions are always welcome! Please discuss larger changes via issue before submitting a pull request.
FAQs
Font selector component for Google Fonts
The npm package font-picker receives a total of 1,932 weekly downloads. As such, font-picker popularity was classified as popular.
We found that font-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.